<style>
.ly-box-check {
        position: relative;
        margin-right: 12px;
        cursor: pointer;
        width: 120px;
        height: 60px;
        background: rgba(255, 255, 255, 1);
        border-radius: 2px;
        border: 1px solid rgba(220, 227, 235, 1);
        justify-content: space-between;
        align-items: center;
        display: flex;
        flex-flow: column;
        flex-wrap: nowrap;
        margin-bottom: 10px;
        padding: 10px;
        overflow: hidden;
    }

    .ly-box-check.checked {
        border: 1px solid var(--primary);
    }

    .ly-box-check .title {
        color: #111;
        line-height: 17px;
    }

    .ly-box-check.checked .title {
        color: var(--primary);
    }

    .ly-box-check .description {
        font-size: 12px;
        color: #99A9BF;
    }

    .ly-box-check .status {
        line-height: 1.15;
        display: none;;
        position: absolute;
        right: -15px;
        bottom: -6px;
        width: 40px;
        height: 24px;
        background: var(--primary);
        text-align: center;
        -webkit-transform: rotate(-45deg);
        transform: rotate(-45deg);

    }

    .ly-box-check.checked .status {
        display: block;;
    }

    .ly-box-check .status i {
        font-size: 12px;
        margin-bottom: 11px;
        -webkit-transform: rotate(45deg);
        transform: rotate(45deg);
        color: #fff;
    }

    .ly-box-check .status.checked {
        background: var(--primary);
        box-shadow: 0 0 1pc 1px rgba(0, 0, 0, .2);
        -webkit-box-shadow: 0 0 1pc 1px rgba(0, 0, 0, .2);
    }
    .icondis{
        display: none !important;
    }
</style>
<template>
    <div @click="onItemClick" :style="{width:width,height:height}" class="ly-box-check"
         :class="{checked:checked}">
        <slot>
            <span class='title' v-if="type_show">{{time_slot}}</span>
            <span class='title'>{{title}}</span>
            <span class="description" v-if="type_show">{{classroom_name}}</span>
            <span class="description" v-if="type_show">{{teacher_name}}</span>
            <span class="description">{{description}}</span>
        </slot>
        <label :class="{'icondis': icondis}" class="status">
            <i class="el-icon-upload-success el-icon-check"></i>
        </label>
    </div>
</template>
<script>
    //这里定义组件
    Rap.define('', [], {
        name: 'ly-radio',
        props: {
            type_show: {
                'default': ''
            },
            time_slot: String,
            title: String,
            classroom_name: String,
            teacher_name: String,
            description: String,
            width: String,
            height: String,
            label:{
                'default':''
            },
            value: {
                'default': false
            },
            icondis:{
                'default':false
            } //控制是否点击显示小图标
        },
        watch: {
            'value': function (value) {
                this.computeCheck(value);
            }
        },
        created:function () {
            if(this.owner){
                this.computeCheck(this.owner.value);
            }else{
                this.computeCheck(this.value);
            }
        },
        data: function () {
            return {
                checked: false
            }
        },
        computed: {
            owner: function () {
                var parent = this.$parent;
                if(parent.check_group_id){
                    return parent;
                }
                return null;
            }
        },
        methods: {
            computeCheck:function (value) {
                if(this.label!==''){
                    this.checked=(value==this.label);
                }else{
                    this.checked = (value == true || value == 1 || value == 'true' || value == '1');
                }
            },
            onItemClick: function () {
                this.checked = !this.checked;
                if(this.label!==''){
                    if(this.owner){
                        this.checked=true;
                        this.owner.$emit('input', this.label);
                    }else
                    if(this.checked){
                        this.$emit('input', this.label)
                    }else{
                        this.$emit('input','')
                    }
                }else{
                    this.$emit('input', this.checked)
                }
            }
        }
    })
</script>